<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <!-- <script type="text/javascript" src="./bmap.min.js"></script> -->
  <script type="text/javascript" src="../node_modules//echarts/dist/extension/bmap.js"></script>
  <script src="http://api.map.baidu.com/api?v=2.0&ak=nr59m9fCNtXtyE6clEiWE2G3h6sYCBIE"></script>

</head>

<body>
  <div id="box" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('box'));

    // 指定图表的配置项和数据
    $.get('./1.json', function (data) {

      var points = [].concat.apply([], data.map(function (track) {
        return track.map(function (seg) {
          return seg.coord.concat([1]);
        });
      }));
      myChart.setOption(option = {
        animation: false,
        bmap: {
          center: [120.13066322374, 30.240018034923],
          zoom: 14,
          roam: true
        },
        visualMap: {
          show: false,
          top: 'top',
          min: 0,
          max: 5,
          seriesIndex: 0,
          calculable: true,
          inRange: {
            color: ['blue', 'blue', 'green', 'yellow', 'red']
          }
        },
        series: [{
          type: 'heatmap',
          coordinateSystem: 'bmap',
          data: points,
          pointSize: 5,
          blurSize: 6
        }]
      });
      // 添加百度地图插件
      var bmap = myChart.getModel().getComponent('bmap').getBMap();
      bmap.addControl(new BMap.MapTypeControl());
    });

    // 使用刚指定的配置项和数据显示图表。
  </script>
</body>

</html>